<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="../main">帮买及废品回收</a></el-breadcrumb-item>
			<el-breadcrumb-item>门店管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 门店状态 -->
		<span class="sp">全部门店</span>
		<span class="sp">上架中</span>
		<span class="sp">已下架</span>


		<!-- 搜索栏  模糊查询 -->
		<el-form :inline="true" :model="storeInfo" class="demo-form-inline">
			<el-form-item label="门店名称:">
				<el-input clearable @clear="getStoryList()" v-model="storeInfo.keyword"
					placeholder="请输入门店名称" ></el-input>
			</el-form-item>
			<el-form-item label="门店手机号:">
				<el-input clearable @clear="getStoryList()" v-model="storeInfo.phone" placeholder="请输入门店手机号"></el-input>
			</el-form-item>
			<el-form-item label="提交日期:">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="subDate" type="daterange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getStoryList" style="background-color: khaki; border: none;">搜索</el-button>
			</el-form-item>
		</el-form>


		<!-- 新增门店 -->
		<el-button type="primary" style="margin-bottom: 20px; background-color: khaki; border: none;" @click="addStore">新增门店</el-button>


		<!-- 表格信息 -->
		<el-table :data="storeList" style="width: 100%" :header-cell-style="{backgroundColor: '#f8f8f8'}">
			<el-table-column prop="shopName" label="门店">
			</el-table-column>
			<el-table-column prop="shopId" label="ID">
			</el-table-column>
			<el-table-column prop="shopPhone" label="门店手机号">
			</el-table-column>
			<el-table-column prop="shopAdress" label="门店地址">
			</el-table-column>
			<el-table-column prop="shopStatus" label="商品状态">
			</el-table-column>
			<el-table-column prop="shopOrderCount" label="订单数量">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-link :underline="false" type="success" @click="editStore(scope.row)">修改</el-link>
				</template>
			</el-table-column>
		</el-table>

		<!-- 页码 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="storeInfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="storeInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<!-- 新增门店弹出框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
			<el-form :model="store">
				<el-form-item label="门店名称" label-width="120px">
					<el-input v-model="store.shopName"></el-input>
				</el-form-item>

				<!-- 门店手机号 -->
				<el-form-item label="门店手机号" label-width="120px">
					<el-input v-model="store.shopPhone"></el-input>
				</el-form-item>

				<!-- 所属地区 -->
				<el-form-item label="所属地区" label-width="120px">
					<el-cascader :options="citys" v-model="address" placeholder="请选择所属地址"></el-cascader>
				</el-form-item>

				<!-- 门店坐标 -->
				<el-form-item label="门店坐标" label-width="120px">
					<el-button type="primary" @click="getLocation">获取位置</el-button>
					<span v-show="store.shopLongitude">{{store.shopLongitude}},{{store.shopLatitude}}</span>
				</el-form-item>

				<!-- 营业时间 -->
				<el-form-item label="营业时间" label-width="120px">
					<el-input v-model="store.shopDescribe"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="updata">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
			
				
				//引入的城市信息
				citys: citys,

				//接收选择的地区信息数组
				address: [],

				//增加门店获取接口对象
				store: {
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: "",
				},

				//弹出框状态
				dialogFormVisible: false,

				//弹出框头部提示
				title: '新增门店',

				//get请求后面拼接的参数
				storeInfo: {
					pageNum: 1,
					pageSize: 10,
					phone: '',
					keyword: '',
					shopStatus: '',
					startTime: '',
					endTime:'' ,
					
				},
				subDate: '',
				total: 1,
				storeList: []
			}
		},
		methods: {
			
			//修改门店信息
			editStore(row) {
				this.dialogFormVisible = true
				this.title = '修改门店信息'
				this.store = row
				this.address = [this.store.shopProvince, this.store.shopCity, this.store.shopDistrict]
			},


			//取消添加门店
			cancel() {
				this.dialogFormVisible = false
				this.store = {
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: "",
				}
				this.address = []
				this.getStoryList()
			},

			//确认添加门店
			updata() {
				if(this.title=='新增门店'){
					this.$http.post('shop/addShop', this.store)
					.then(res => {
						this.$message.success('操作成功!')
						this.cancel()
					})
				}else{
					this.$http.post('shop/modifyShop', this.store)
					.then(res => {
						this.$message.success('操作成功!')
						this.cancel()
					})
				}
				
			},


			//获取坐标
			getLocation() {
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: this.store.shopProvince + this.store.shopCity + this.store.shopDistrict + this
								.store.shopAddress
						}
					})
					.then(res => {
						if (!this.store.shopProvince) {
							this.$message.error('请输入省市区!')
							return false
						}
						let location = res.data.geocodes[0].location
						this.store.shopLatitude = location.split(',')[0]
						this.store.shopLongitude = location.split(',')[1]
					})
			},

			//增加门店
			addStore() {
				this.dialogFormVisible = true
			},

			//获得门店信息对象集合
			getStoryList() {
				this.$http.get('shop/querySearchShopList', {
						params: this.storeInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.storeList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
					.catch(error => {
						this.$message.error('服务器接口错误!')
					})
			},

			// 页数改变时调用的函数
			handleCurrentChange(num) {
				this.storeInfo.pageNum = num
				this.getStoryList()
			},

			//每页展示条数改变时的函数
			handleSizeChange(size) {
				this.storeInfo.pageSize = size
				this.storeInfo.pageNum = 1
				this.getStoryList()
			},

		},
		mounted() {
			this.getStoryList()
		},

		// 根据时间模糊查询
		watch: {
			subDate() {
				if (this.subDate) {
					this.storeInfo.startTime = this.subDate[0]
					this.storeInfo.endTime = this.subDate[1]
				} else {
					this.storeInfo.startTime = ''
					this.storeInfo.endTime = ''
				}
			},
			address() {
				this.store.shopProvince = this.address[0]
				this.store.shopCity = this.address[1]
				this.store.shopDistrict = this.address[2]
			}
		}
	}
</script>

<style>
	.sp {
		font-size: 15px;
		margin-left: 20px;
		color: black;
		margin-bottom: 30px;
		display: inline-block;
	}

	.sp:active {
		color: aqua;
	}
	
	.el-pagination {
		margin-left: 300px;
	}
</style>